<template>
	<view class="cash_warps">
		<view class="cash_money f f_align f_align_center">
			<view class="">可提余额：</view>
			<view class="cash_m">{{userInfo.accountEntity.brokerageAmount}}元</view>
		</view>

		<view class="cash_m_money f f_column">
			<input v-model="amount" maxlength="8" class="f f_align f_align_center" placeholder-style="placeStyle" type="number" placeholder="请输入提现金额" />
			<view class="c_m_w_item f f_warp">
				<view
					v-for="(item,index) in cash_m" :key="index"
					:class="amount == item ? 'c_m_w_i_item active' : 'c_m_w_i_item'"
					@click="amount = item"
				 >
					<view class="cash_rechage f f_align_center f_center">{{item}}元</view>
				</view>
			</view>

		</view>

		<view class="cash_methds_warps f f_column">
			<view class="f f_align_center f_align">
				<view class="cash_method bold f f_align_center">提现方式</view>
				<view @click="$navTo('./cashMeth')" class="Mores">更换方式<i class="iconfont iconzu5536"></i></view>
			</view>
			<view class="methdos_i f f_align f_align_center" v-if="card_meth.userCardId && card_meth.userCardId != ''">
				<view class="f f_align_center">
					<view class="f f_align_center" v-if="card_meth.cardType == '10014001'">
						<i class="iconfont iconlujing4256"></i>支付宝
					</view>
					<view class="f f_align_center" v-else-if="card_meth.cardType == '10014002'">
						<i class="iconfont iconjianqu13"></i>微信
					</view>
					<view class="f f_align_center" v-else>
						<i class="iconfont iconzu5670"></i>银行卡
					</view>
					<!-- <text>{{$getDict(card_types,card_meth.cardType)}}</text> -->
					<text class="ml10">({{card_meth_names(card_meth)}})</text>
				</view>
			</view>
		</view>
		<button class="biding_btn" :loading="isLoading" @click="cashAmount">
			立即提现
		</button>

		<!-- 密码验证 -->
		<pwInput ref="pwInput" @input-ok="isOkDone" :isLoading="loadings" />
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import pwInput from '@/components/pwInput/pwInput'
	export default {
		data() {
			return {
				cash_m:[30,100,200,500,1000,2000],
				amount:'',

				userInfo:{
					payPassword:'',
					accountEntity:{
						brokerageAmount:0
					}
				},
				cardList:[],

				card_meth:{
					cardType:"",
					userCardId:'',
					alipayAccount:''
				},
				isLoading:false,
				loadings:false
			};
		},
		computed:{
			...mapState({
				card_types:state=>state.dictArrs.card_type
			})
		},
		onLoad() {
			this.$store.dispatch('getDictlists','card_type');
		},
		onShow() {
			this.init();
			this.getListCardUser();
		},
		methods:{
			init(){
				this.getUserInfo();
			},
			//查询卡信息
			async getListCardUser(){
				const _this = this;
				_this.card_meth = uni.getStorageSync('card_meth');
			},
			//获取用户信息哦
			async getUserInfo(){
				const _this = this;
				let res = (await _this.$http('/api/auth/user/getUserInfo','POST',{})).data;
				uni.stopPullDownRefresh();
				if(res && res.code == '0'){
					let userInfo = res.data;
					_this.userInfo = userInfo;
					uni.setStorageSync('userInfo',userInfo);
				}
			},
			//字段返回
			card_meth_names(item){
				let strs = ''
				if(item.cardType == '10014003'){
					strs = item.bankcardNum.toString();
				}else if(item.cardType == '10014002'){
					strs = item.wxAccount.toString();
				}else{
					strs = item.alipayAccount.toString();
				};
				return '****'+strs.substring(strs.length-4 < 0 ? 0 : strs.length-4,strs.length)
			},
			//提现哦
			cashAmount(){
				const _this = this;
				if(_this.userInfo.accountEntity.brokerageAmount <= 0){
					return _this.$showToast('可提现金额不足～');
				}
				if(_this.isLoading){
					return _this.$showToast('提现中,请勿重复提交...');
				}
				if(_this.amount == '' || _this.amount<= 0){
					return _this.$showToast('请输入提现金额');
				};
				if(!_this.card_meth.userCardId){
					return _this.$showToast('请先选择提现方式');
				}
				//是否设置支付密码
				if(_this.userInfo.payPassword && _this.userInfo.payPassword != ''){
					//打开密码验证
					_this.$refs.pwInput.visibleToast = true;
				}else{
					uni.showActionSheet({
						itemList:['未设置支付密码，去设置？'],
						success(e) {
							if(e.tapIndex == 0){
								_this.$navTo('../setting/setting')
							}
						}
					})
				}
			},
			async isOkDone(pw){
				const _this = this;
				_this.loadings = true;
				_this.isLoading = true;
				_this.$http('/api/auth/user/cashOrder/createCashOrder',"post",{
					amount:_this.amount,
					password:pw,
					userCardId:_this.card_meth.userCardId
				}).then(res=>{
					_this.loadings = false;
					_this.isLoading = false;
					if(res && res.data.code == '0'){
						//关闭密码验证
						_this.$refs.pwInput.visibleToast = false;
						_this.amount = '';
						_this.getUserInfo();
						_this.$showToast('提现成功，等待放款～');
					}else{
						_this.$showToast(res.data.msg);
					}

				}).catch(()=>{
					_this.loadings = false;
					_this.isLoading = false;
				})
			}
		},
		onPullDownRefresh() {
			this.init();
		}
	}
</script>

<style lang="scss" scoped>
	.cash_warps{
		width: 100%;
		min-height: 100vh;
		background-color: #F7F9FA;
		font-size: 30rpx;
		.cash_methds_warps{
			padding: 120rpx 36rpx;
			.Mores{
				font-size: 22rpx;
				color: $ych_color;
				.iconfont{font-size: 22rpx;}
			}
			.cash_method{
				font-size: 32rpx;color: #333;
				&::before{
					content: '';
					display:flex;
					width:8rpx;height: 28rpx;
					border-radius: 4rpx;
					background-color: $ych_color;
					margin-right: 16rpx;
				}
			}
			.methdos_i{
				padding-top: 40rpx;
				font-size: 28rpx;
				.iconfont{
					font-size: 36rpx;
					margin-right: 28rpx;
					&.iconjianqu21,&.iconzu5501{
						font-size: 32rpx;
						margin-right: 0;
					}
				}
			}
		}
		.cash_money{
			padding: 23rpx 32rpx;
			margin: 0rpx 0 16rpx;
			border-top: solid 1rpx $ych_br_color;
			background-color: #fff;
			.cash_m{
				color: #FA2420;
			}
		}
		.cash_m_money{
			box-sizing: border-box;
			width: 100%;
			padding: 0 32rpx 28rpx;
			background-color: #fff;
			input{
				text-align: right;
				padding: 24rpx 0;
				border-bottom: solid 1rpx $ych_br_color;
				font-weight: bold;
				font-size: 40rpx;
				&::before{
					content: '¥';
					font-size: 48rpx;
					color: #1A1A1A;
				}
			}
			.c_m_w_item{
				width: 100%;
				.c_m_w_i_item{
					width: 33.333%;
					margin-top: 32rpx;
					&.active{
						.cash_rechage{
							background-color: $ych_color;
							color: #fff;
						}
					}
					.cash_rechage{
						width: 212rpx;
						height: 72rpx;
						color: #292929;
						background-color: #F0F0F0;
						border-radius: 6rpx;
					}
				}
			}
		}

		.biding_btn{
			width: 606rpx;
			height: 88rpx;
			background-color: $ych_color;
			border-radius: 12rpx;
			font-size: 30rpx;
			color: #fff;
			@include flex_center;
			margin:100rpx auto;
			@include box_shadow_btn;

		}
	}
</style>
